<template>
	<div class="datail">
		<el-container>
			<el-container>
				<el-header class="input">
					<span>请输入查询内容</span>
					<input type="text" placeholder="请输入查询内容"  v-model="key"/>
					<button @click="findbook()">查找</button>
				</el-header>

				<el-container>
					<el-aside class="menu">
						<el-menu>
							<el-menu-item index="1" @click="showall()">所有类型商品</el-menu-item>
						</el-menu>
						<el-menu v-for="(item,index) in newlist" :key='item.id'>
							<el-menu-item index="index" @click="btn(item.id)">
								<template #title>
									{{item.type}}
								</template>
							</el-menu-item>
							<el-tag v-for="val in newlist[index].child" :key="val.id" @click="btn(val.id)">{{val.type}}</el-tag>
						</el-menu>
					</el-aside>

					<el-main class="tab">
						<ul>
							<li v-for="item in list" :key="item.id">
								<img :src="`${$Imgurl}/showImg/${item.picture}`">
								<div>
									<p v-html="item.name"></p>
									<p v-html="item.author"></p>
									<p v-html="item.publisher"></p>
									<p>￥{{item.price}}<button @click="buy(item)">购买</button></p>
								</div>
							</li>
						</ul>
						<div v-show="total>num">
							<el-pagination layout="prev, pager, next" :page-size="num" @current-change="pageChange" :current-page="start"
							 :total="total"></el-pagination>
						</div>
					</el-main>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default {
		name: 'Detail',
		data() {
			return {
				alllist: [],
				list: [],
				total: 0,
				start: 1, //当前页数
				num: 8, //每页条数
				searchStr:'',
				onType: 0,
				newlist: [] ,//接受等级数组
				key:''
			}
		},
		methods: {
			//递归
			fun(id, arr) {
				if (id === 0) {
					this.alllist.forEach(item => {
						if (item.pid === 0) {
							arr.push(item)
						}
					})
					this.fun(this.newlist[0].id, this.newlist)
				} else {
					arr.forEach((item, i) => {
						this.alllist.forEach((val) => {
							if (item.id === val.pid) {
								if (!item.child) item.child = []
								item.child.push(val)
							}
						})
						if (item.child) {
							this.fun(1, item.child)
						}
					})
				}
			},
			//查看全部
			showall() {
				this.axios.get('/api/public/findBookByPage/0/8/0').then((res) => {
					let data = res.data.data.books
					this.list = data
					this.total=res.data.data.total
				}).catch((error) => {

				});
			},
			//分类查看
			btn(val) {
				this.axios.get('/api/public/findBookByPage/0/8/' + val).then((res) => {
					let data = res.data.data.books
					this.list = data
					this.total=res.data.data.total
				}).catch((error) => {});
			},
			//分页
			pageChange(n) {
				this.start=n
				if(this.onType>=0){
					this.axios.get("/api/public/findBookByPage/"+(n-1)+"/"+this.num+"/"+this.onType).then( (res)=>{
						this.total=res.data.data.total
						this.list=res.data.data.books
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
				if(this.onType<0){
					this.axios.post("/api/public/book/findIf/" + (n - 1) + "/" + this.num,{
						key:this.searchStr
					}).then( (res)=>{
						console.log(res);
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
			},
			findbook(){
				if(this.key!=''){
					this.axios.post('/api/public/book/findIf/0/8','key='+this.key,{
						headers:{'Content-Type':'application/x-www-form-urlencoded'}
					}).then( (res)=>{
						this.list=res.data.data.books
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
			},
			buy(val) {
				let token = localStorage.getItem('token')
				if (token == '') {
					this.$message.warning({
						message: "请登录账号",
						offset: 80
					})
				} else {
					instance.post('/api/public/addCart/' + val.id).then((res) => {
						if (res.data.code == 200) {
							this.$message.success({
								message: "添加购物车成功",
								offset: 80
							})
						}
					}).catch((error) => {
						console.log(error);
					})
				}
			}
		},
		created() {
			this.key=this.$route.query.key
			this.findbook()
			this.axios.get('/api/public/type/findAll2').then((res) => {
				let data = res.data.data
				this.alllist = data
				this.fun(0, this.newlist)
			}).catch((error) => {

			});
		}
	}
</script>

<style scoped>
	.el-header {}

	.input {
		margin-top: 70px;
		border-bottom: 2px solid gold;
	}

	.input span {
		display: block;
		float: left;
		color: white;
		height: 40px;
		margin-top: 8px;
		padding: 0px 10px;
		line-height: 40px;
		border-radius: 5px;
		margin-right: 5px;
		background-color: #f56c6c;
	}

	.input input {
		width: 350px;
		border-radius: 20px;
		border: 1px solid gold;
		float: left;
		outline: none;
		text-indent: 2em;
		height: 40px;
		margin-top: 6px;
	}

	.input button {
		position: absolute;
		margin-top: 15px;
		left: 432px;
		border: none;
		color: red;
		font-weight: bold;
		font-size: 17px;
		top: 62px;
		background-color: gold;
		border-radius: 0 16px 16px 0;
		height: 42px;
		width: 80px;
	}

	.tab ul {
		width: 100%;
	}

	.tab ul li {
		width: 40%;
		margin-top: 20px;
		margin-left: 5%;
		float: left;
	}

	.tab ul li img {
		height: 100px;
		width: 100px;
	}

	.tab div {
		width: 60%;
		height: 100px;
		float: right;
	}

	.tab p {
		margin-top: 5px;
	}

	.el-tag {
		border: none;
		background-color: white;
		margin-left: 5px;
	}

	.el-tag:hover {
		cursor: pointer;
	}
</style>
